

/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls.Basic
import QtQuick.Controls

Rectangle {
    id: root
    width: 800
    height: 480
    color: "#000000"

    property int revLightsPercent: 100
    property bool drsEnabled: false
    property int lapNum: 0
    property int carPos: 0
    property int speed: 0
    property real fuel: 0
    property real fuelRemain: 0
    property string currLapTimeStr: "01.59.610"
    property string frontDiffTimeStr: "0.250"
    property string backDiffTimeStr: "0.110"
    property string gear: "P"
    property var tyresTemperature: [100, 100, 100, 100]
    property real ersStoreEnergy: 0.5
    property int ersDeployMode: 0
    property real ersHarvestedThisLap: 0.5
    property real ersDeployedThisLap: 0.5

    Rectangle {
        id: shiftLightsPanel
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.top: parent.top
        anchors.topMargin: 10
        height: 30
        color: "transparent"
        Row {
            anchors.fill: parent
            spacing: 10
            Repeater {
                model: root.revLightsPercent / 100.0 * 18
                ShiftLight {
                    lightColor: index >= 12 ? "red" : index >= 6 ? "yellow" : "green"
                }
            }
        }

        ShiftLight {
            id: drsLight
            visible: root.drsEnabled
            lightColor: "red"
            anchors.right: parent.right
            anchors.rightMargin: 20
        }
    }

    Column {
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.top: shiftLightsPanel.bottom
        anchors.topMargin: 10

        AText {
            text: root.currLapTimeStr
        }
        AText {
            text: "+ " + root.frontDiffTimeStr
            color: "red"
            visible: root.frontDiffTimeStr.toLowerCase() !== "N/A"
        }

        AText {
            text: "- " + root.backDiffTimeStr
            color: "green"
            visible: root.backDiffTimeStr.toLowerCase() !== "N/A"
        }
    }

    Grid {
        spacing: 20
        rows: 2
        columns: 2
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: 50
        anchors.right: parent.right
        anchors.rightMargin: 100

        AText {
            text: root.tyresTemperature[0].toString() + "℃"
        }
        AText {
            text: root.tyresTemperature[0].toString() + "℃"
        }
        AText {
            text: root.tyresTemperature[0].toString() + "℃"
        }
        AText {
            text: root.tyresTemperature[0].toString() + "℃"
        }
    }

    Column {
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.top: shiftLightsPanel.bottom
        anchors.topMargin: 10
        spacing: 10

        Row {

            spacing: 20

            AText {
                id: lapNumLabel
                text: "L" + root.lapNum.toString()
                color: "#efefef"
            }

            AText {
                id: posNumLabel
                text: "P" + root.carPos.toString()
                color: "#efefef"
            }
        }
        AText {
            id: speedLabel
            text: root.speed.toString() + "KPH"
            font.pixelSize: 35
        }

        Row {
            spacing: 12
            AText {
                id: fuelLabel
                text: fuel.toString()
            }
            AText {
                x: 10
                id: fuelRemainLabel
                visible: true
                text: root.fuelRemain.toString()
                font.pixelSize: 20
                anchors.bottom: parent.bottom
            }
        }
    }

    AText {
        id: gearLabel
        color: "#efefef"
        text: root.gear
        anchors.centerIn: parent
        font.pixelSize: 50
        font.bold: true
    }

    Rectangle {
        id: batteryBarContainer
        height: 30
        x: 20
        y: parent.height - height - 20
        width: parent.width - 40
        color: "transparent"

        ProgressBar {
            id: batteryBar
            height: parent.height
            width: parent.width - 55
            background: Rectangle {
                border.width: 3
                border.color: "#efefef"
                color: "#00000000"
                radius: 5
            }

            value: root.ersStoreEnergy

            Rectangle {
                radius: 5
                color: "#efefef"
                x: (parent.width - parent.availableWidth) / 2
                y: (parent.height - parent.availableHeight) / 2
                height: parent.availableHeight
                width: parent.visualPosition * parent.availableWidth
            }
        }

        AText {
            text: Math.trunc(root.ersStoreEnergy * 100)
            font.pixelSize: 25
            anchors.right: parent.right
        }
    }
    Rectangle {
        height: 30
        x: 20
        y: batteryBarContainer.y - height - 10
        width: parent.width - 40
        color: "transparent"

        Rectangle {
            id: batteryModeContainer
            height: 30
            color: "#7a82d7ed"
            width: 60
            anchors.centerIn: parent
            border.width: 3
            border.color: "#ff82d7ed"
            radius: 5
            AText {
                id: batteryMode
                text: root.ersDeployMode.toString()
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }

        ProgressBar {
            background: Rectangle {
                border.color: "#ff82d7ed"
                border.width: 3
                color: "transparent"
                radius: 5
            }

            value: root.ersHarvestedThisLap
            height: parent.height
            anchors.right: batteryModeContainer.left
            anchors.rightMargin: 10
            anchors.left: parent.left
            contentItem: Rectangle {
                width: parent.visualPosition * parent.width
                radius: 5
                color: "#ff82d7ed"
            }
        }

        ProgressBar {
            background: Rectangle {
                border.color: "#e8d43f"
                border.width: 3
                color: "transparent"
                radius: 5
            }

            value: root.ersDeployedThisLap
            height: parent.height
            anchors.left: batteryModeContainer.right
            anchors.leftMargin: 10
            anchors.right: parent.right
            contentItem: Rectangle {
                width: parent.visualPosition * parent.width
                x: parent.width - width
                radius: 5
                color: "#e8d43f"
            }
        }
    }
}
